<!--自定义ArtPlayer组件-->
<script setup>
import Artplayer from 'artplayer';
import artplayerPluginDanmuku from "artplayer-plugin-danmuku";
import {nextTick, onBeforeUnmount, onMounted, ref} from 'vue';
import {loadDanmuPool, sendDanmu} from '@/api/DanmuRequest.js'
import {getVideo} from '@/api/VideoRequest.js'
import Pubsub from "pubsub-js";
import {NotLoginCode} from "@/api/LoginRequest.js";

// 传递实体 {art_player, video}
const emit = defineEmits(['get-instance']);

const props = defineProps({
  option: {
    type: Object,
    required: true,
  },
});

const videoId = props.option.id

async function load_danmuku(videoId) {
  const res = await loadDanmuPool(videoId)
  return res.code === 0 && res.data.length > 0 ? res.data : '/assets/sample/danmuku.xml';
}

const commonOption = {
  autoSize: true,
  hotkey: true,
  pip: true,
  fullscreen: true,
  autoOrientation: true,
  lock: true,
  fastForward: true,
  miniProgressBar: true,
  playbackRate: true,
  setting: true,
  quality: [
    {
      default: true,
      html: '480P',
      url: '/assets/sample/video.mp4',
    },
    {
      html: '720P',
      url: '/assets/sample/video.mp4',
    },
  ],
};

const danmukuOption = {
  // 弹幕列表，可以动态更新
  danmuku: '/assets/sample/danmuku.xml',

  // 这是用户在输入框输入弹幕文本，然后点击发送按钮后触发的函数
  // 你可以对弹幕做合法校验，或者做存库处理
  // 当返回true后才表示把弹幕加入到弹幕队列
  async beforeEmit(danmu) {
    console.log('发送弹幕前',danmu);
    // 检验
    const isDirty = (/fuck/i).test(danmu.text);
    if (isDirty) return false;

    //发送保存弹幕请求
    const res = await sendDanmu(videoId, danmu)
    if(res.code === NotLoginCode()) {
      // 弹幕发送失败,用户未登录
      Pubsub.publish('not-login', {
        isLogin: false,
      })
    }
    return res.code === 0
  },

  // 这里是所有弹幕的过滤器，包含来自服务端的和来自用户输入的
  // 你可以对弹幕做合法校验
  // 当返回true后才表示把弹幕加入到弹幕队列
  filter(danmu) {
    return danmu.text.length <= 200;
  },

  // 这是弹幕即将显示的时触发的函数
  // 你可以对弹幕做合法校验
  // 当返回true后才表示可以马上发送到播放器里
  async beforeVisible(danmu) {
    return true;
  },
};

const instance = ref(null);
const artRef = ref(null);

onMounted(async () => {
  const res = await getVideo(videoId)
  if (res.code === 0) {
    const video = res.data
    danmukuOption.danmuku = await load_danmuku(videoId)
    instance.value = new Artplayer({
      url: video.url, //'http://192.168.2.9:9001/video/Touhou.mp4',
      poster: video.coverPicture,//'http://192.168.2.9:9001/img/header1.jpg',
      ...props.option,
      ...commonOption,
      plugins: [artplayerPluginDanmuku(danmukuOption)],
      container: artRef.value,
    });
    await nextTick(() => {
      emit('get-instance', {code: 0, msg: 'success', data: {art_player: instance.value, video}});

      instance.value.on('artplayerPluginDanmuku:loaded', (danmus) => {
        console.info('加载弹幕', danmus.length);
      });

      instance.value.on('artplayerPluginDanmuku:error', (error) => {
        console.info('加载错误', error);
      });
    });
  } else {
    emit('get-instance', {code: res.code, msg: res.msg, data: {}});
  }
});

onBeforeUnmount(() => {
  if (instance.value) {
    instance.value.destroy(false);
  }
});


</script>

<template>
  <div ref="artRef"></div>
</template>
